<template>
  <div>
    <div id="tips">
      <h1 style="font-size: 20px;">欢迎入住涤尘小筑，如果您还未注册，则可点击
        <router-link to="/">注册</router-link>
      </h1>
      <div class="divider"></div>
    </div>
    <div class="login-form">
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="username">用户名：</label>
          <input type="text" id="username" v-model="formData.username" required>
          <span v-if="!checkusernameLength(formData.username)">长度是6个字符</span>
        </div>
        <div class="form-group">
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="formData.password" required>
          <span v-if="!checkPasswordLength(formData.password)">密码长度不能超过12位</span>
        </div>
        <div class="form-group">
        <button type="submit" class="action-button">登录</button>
        <button type="reset" class="action-button" @click="handleReset">重置</button>
      </div>
      </form>
    </div>
  </div>
</template>

<script>
import VueUploadComponent from 'vue-upload-component';
export default {
  name: 'login',
  components: {
    VueUploadComponent,
  },
  data() {
    return {
      formData: {
        username: '',
        password: ''
      },
      avatarPreview: null,
    };
  },
  methods: {
    checkusernameLength(username) {
      return username.length == 6;
    },
    checkPasswordLength(password) {
      return password.length <= 12;
    },

    handleSubmit() {

      if (!this.checkusernameLength(this.formData.username)) {
        alert('用户名为6位，请重新输入！');
        return;
      }

      if (!this.checkPasswordLength(this.formData.password)) {
        alert('密码长度不能超过12位，请重新输入！');
        return;
      }

      alert('登录成功！');

    },

    handleReset() {
  this.formData = {
    username: '',
    password: '',
  };
},
  },
};
</script>

<style scoped>
.login-form {
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}
.form-group {
  margin-bottom: 20px;
}
.avatar-preview {
  max-width: 200px;
  margin-top: 10px;
}
.divider {
  width: 100%;
  height: 1px;
  background-color: #ccc; /* 分割线颜色 */
  margin: 20px 0; /* 可根据需要调整上下间距 */
}
.action-button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.action-button:hover {
  background-color: #0056b3;
}
</style>
